<template>
    <view :animation="animationData">
        <view v-if="placeholder && show"></view>
    </view>
    <view class="h_popup_content" :animation="animationData" :style="{ width, left, zIndex, 'background-color': bgColor, }">
        <slot v-if="show" />
    </view>
</template>

<script setup>
import { ref, watch } from 'vue'

/**
 * @description 定义props
 * @param {*} show 是否显示 
 * @param {string or number} height 高度 默认200rpx 传入数字或者字符串都以rpx为单位
 * @param {*} width 宽度 默认100%
 * @param {string} bgColor 背景颜色 默认#fff
 * @param {string or number} duration 动画时间 默认300
 * @param {string or number} left 距离左侧的距离
 * @param {boolean} placeholder 是否显示占位符 默认false
 */
const props = defineProps({
    // 是否显示
    show: {
        type: Boolean,
        default: false,
    },
    height: {
        type: String,
        default: '100vh',
    },
    width: {
        type: String,
        default: '100%',
    },
    bgColor: {
        type: String,
        default: '#fff',
    },
    duration: {
        type: [Number, String],
        default: 300
    },
    left: {
        type: [Number, String],
        default: 0
    },
    placeholder: {
        type: Boolean,
        default: false
    },
    zIndex: {
        type: [Number, String],
        default: 99
    }
})

// 创建emit
const emit = defineEmits(['update:show'])
// 动画
const animationData = ref(null)


/**
 * @description 判断heigh是否为数字或者字符串，然后对其进行处理，转换为数字
 * @param {*} height 
 */
const heightForMat = (height) => {
    return typeof height === 'number' ? height : parseInt(height)
}

/**
 * @description 判断width是否为数字或者字符串，然后对其进行处理，转换为数字
 */


// 监听show的变化
watch(() => props.show, (val) => {
    if (val) {
        createAnimation(`${heightForMat(props.height)}vh`, `${-heightForMat(props.height)}vh`)
    } else {
        createAnimation(0, 0)
    }
})


/**
 * 创建动画
 */
const createAnimation = (h, y) => {
    const animation = uni.createAnimation({
        duration: Number(props.duration),
        timingFunction: 'ease',
    })
    animation.height(h).bottom(props.placeholder ? 0 : y).step()
    animationData.value = animation
}
</script>

<style lang="scss" scoped>
.h_popup_content {
    position: absolute;
    bottom: 0;
    height: 0;
    border-radius: 0 0 20rpx 20rpx;
    overflow: hidden;
}
</style>